<style scoped lang="scss">
    .dapan {
        padding: 0 10px;
    }
    .el-row {
        padding: 20px 5px;
        font-size: 18px;
        &:not(:last-child){
            border-bottom: 1px solid #ddd;
        }
    }
</style>
<template>
    <div class="dapan">
        <div v-for="(item,index) in dapan" :key="index" class="el-row flex">
            <p class="flex-1">
                <span class="grid-content bg-purple">{{item.name}}</span>
            </p>
            <p class="flex-2">
                <span class="grid-content bg-purple-light">{{item.value}}</span>
            </p>
        </div>
    </div>
</template>
<script>
    import {getDp} from '../utils/request'
    export default {
        data() {
            return {
                dapan: {},
                timer: null
            }
        },
        created() {
            this.getDps();
            this.timer = setInterval(() => {
                this.getDps();
            }, 3000)
        },
        methods: {
            getDps() {
                getDp().then((res) => {
                    this.dapan = res.content;
                })
            },
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }
    }
</script>
